<template>
  <div class="resetpwd_container">
    <!-- 背景图片 -->
    <div class="img_bg"></div>
    <div class="title">基于区块链的数字版权保护系统</div>
    <div class="resetpwd_box">
      <h1>重置密码</h1>
      <!-- 密码重置表单 -->
      <el-form :model="form" :rules="rules" ref="form" label-width="0px" class="resetpwd_form">
        <el-form-item prop="userPassword">
          <el-input placeholder="请输入6-12位密码，至少包括大写字母小写字母数字" v-model="form.userPassword" show-password />
        </el-form-item>
        <el-form-item prop="userPasswordAgain">
          <el-input placeholder="请再次输入密码" v-model.lazy="form.userPasswordAgain" show-password />
        </el-form-item>
        <!-- 按钮 -->
        <el-form-item class="btn_changeSubmit">
          <el-button @click="onSubmit()" type="primary" style="width:200px">提交修改</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ResetPassword',
  data () {
    var validatePass = (rule, value, callback) => {
      var reg = /^[A-Za-z0-9]{6,12}$/
      if (value === '') {
        callback(new Error('请输入密码'))
      } else if (!reg.test(this.form.userPassword)) {
        callback(new Error('格式错误! 正确格式：6-12位，包含大小写字母数字,不能有特殊字符'))
        this.$refs.form.validateField('userPasswordAgain')
      } else {
        this.$refs.form.validateField('userPasswordAgain')
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.form.userPassword) {
        callback(new Error('两次输入密码不一致'))
      } else {
        callback()
      }
    }
    return {
      form: {
        userMail: '',
        userPassword: '',
        userPasswordAgain: ''
      },
      userId: '',
      rules: {
        userPassword: [
          { validator: validatePass, trigger: 'blur' }
        ],
        userPasswordAgain: [
          { validator: validatePass2, trigger: 'blur' }
        ]
      }
    }
  },
  mounted () {
    this.userId = this.$route.params.id
  },
  methods: {
    onSubmit () {
      if (this.form.userPassword !== '' && this.form.userPasswordAgain !== '') {
        this.$axios({
          methods: 'post',
          url: '/user/resetPwd',
          headers: { 'content-type': 'application/x-www-form-urlencoded' },
          params: {
            userId: this.userId,
            userPwd: this.form.userPassword,
            userPwdAgain: this.form.userPasswordAgain
          }
        })
          .then((response) => {
            if (response.data.data[0] === false) {
              alert(response.data.msg)
            } else {
              this.$router.push('/welcome')
            }
          })
          .catch(function (error) { console.log(error) })
      } else {
        alert('密码不能为空')
      }
    }
  }
}
</script>

<style lang="less" scoped>

.resetpwd_container{
    .title {
      color: #fff;
      font-size: 30px;
      font-weight: bold;
      position: absolute;
      right: 50%;
      top: 10%;
      transform: translate(50%);
    }
    .img_bg {
        background: url("../assets/bgimg-dark.jpg");
        background-size: 100% 100%;
        height: 100%;
        position: fixed;
        width: 100%;
    }
    // background-color: #eee;
    /* border-radius: 10px;
    margin: 0 25px 0 25px; */
    height: 100%;
}

.resetpwd_box{
    width: 450px;
    height: 280px;
    background-color: #fff;
    border-radius: 10px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    // box-shadow: 0 0 10px #ccc;
}

.resetpwd_form {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

.btn_changeSubmit {
    display: flex;
    justify-content: center;
}

h1 {
    margin-top: 25px;
    color: #333;
    font-size: 22px;
    font-weight: bold;
    display: flex;
    justify-content:center;
}

</style>
